<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

    <%@include file="../common/include.jsp" %>

        <!DOCTYPE html>
        <html>

        <head>

            <meta charset="UTF-8">
            <base href="<%=basePath%>">



        </head>

        <body>



            <div class="row" style="margin-top:20px;margin-left:20px">

                <form id="searchForm" action="${pageContext.request.contextPath}/getRoleList.html" method="post">
                    <div class="col-lg-4">

                        <div class="input-group">

                            <c:choose>
                                <c:when test="${ not empty pages.conditions.name }">
                                    <input type="text" class="form-control" value="${pages.conditions.name }" id="name" name="conditions['name']" maxlength="20">
                                </c:when>

                                <c:otherwise>
                                    <input type="text" class="form-control" placeholder="根据角色名称或者 角色描述模糊查询" id="name" name="conditions['name']" maxlength="20">
                                </c:otherwise>
                            </c:choose>
                            <span class="input-group-btn">
	   <button class="btn btn-primary" type="button"   id="btnsearch">查询</button>
	</span>
                        </div>
                    </div>


                    <div class="col-sm-2">
                        <a href="javascript:void(0)" class="btn btn-primary" id="addrole">增加角色</a>
                    </div>


                </form>

            </div>



            <div style="margin-left:16px; margin-top:20px;margin-bottom:90px;margin-right:20px">
                <table class="table table-striped  table-bordered table-hover">
                    <thead>
                        <tr style="background-color:#dcdcdc; ">
                            <th> 编号</th>
                            <th>角色名称</th>
                            <th>角色描述</th>
                            <th>操作</th>
                        </tr>
                    </thead>

                    <tbody id="tbody">

                        <c:forEach var="role" items="${pages.pageDatas}">
                            <tr id="tr_${role.id }">
                                <td>
                                    <c:out value="${role.id}" />
                                </td>
                                <td>
                                    <c:out value="${role.name}" />
                                </td>
                                <td>
                                    <c:out value="${role.description}" />
                                </td>
                                <td>
                                    <a href="javascript:void(0)" onclick="editrole(${role.id }) " title="编辑" class="handleicon"><i class="fa fa-pencil-square-o"></i> </a>

                                    <a href="javascript:void(0)" onclick="setRoleRights(${role.id })  " title="设置权限" class="handleicon"><i class="fa fa-key"></i> </a>

                                    <a href="getUserListByRoleId.html?roleId=${role.id }" title="管理角色人员" class="handleicon"> <i class="fa fa-users"></i></a>

                                    <a href="javascript:void(0)" onclick="deleterole(${role.id})" title="删除" class="handleicon"><i class="fa fa-times"></i></a>

                                </td>
                            </tr>
                        </c:forEach>


                    </tbody>

                </table>




                <!--  使用自己的 分页标签  前面三个是固定的必须参数 后面的url  是请求路径，可以根据情况  加或者不加参数-->

                <c:if test="${pages.totalPages>1 }">
                    <page:pager pageSize="${pages.pageSize}" currPage="${pages.currPage}" totalRecords="${pages.totalRecords}" url="${pageContext.request.contextPath}/getRoleList.html?conditions['name']=${pages.conditions.name}" />

                </c:if>








                <!-- 开始  增加 div -->
                <div id="addrolediv"> </div>

                <!-- 编辑角色 -->
                <div id="editrolediv"> </div>

                <!--  设置角色的权限 -->
                <div id="setRoleRights"></div>


        </body>


        <script>
            $("#btnsearch").click(function() {

                if (checkChar($("#name").val())) {
                    layer.msg('搜索条件含有非法字符！');
                    return false;
                }


                $("#searchForm").submit();

            });
        </script>




        <script type="text/javascript">
            //定义 增加角色的层 变量，以便可以通过该变量来操作层 ，比如关闭它
            var addlay, editlay, setRoleRightLay;


            /* 增加角色按钮 */

            $("#addrole").on('click', function() {

                $.ajax({
                    type: 'POST',
                    url: '${pageContext.request.contextPath}/addRoleInit.html',
                    data: {},
                    success: function(data) {


                        $("#addrolediv").html(data);
                        //自定页
                        addlay = layer.open({
                            type: 1,
                            title: false,
                            closeBtn: true, // 显示关闭按钮
                            shift: 1,
                            area: ['800px', '460px'],
                            shadeClose: false, //点击窗口意外区域 不响应
                            content: $("#addrolediv")
                        });


                    },
                    error: function() {
                        alert("对不起，出现错误!");
                    }
                });




            })


            /* 修改角色 */

            function editrole(id) {

                $.ajax({
                    type: 'POST',
                    url: '${pageContext.request.contextPath}/updateRoleInit.html',
                    data: {
                        "id": id
                    },

                    success: function(data) {


                        $("#editrolediv").html(data);

                        editlay = layer.open({
                            type: 1,
                            title: false,
                            closeBtn: true, // 显示关闭按钮
                            shift: 1,
                            offset: ['15px'],
                            area: ['800px', '460px'],
                            shadeClose: false, //点击窗口意外区域 不响应
                            content: $("#editrolediv")
                        });


                    },
                    error: function() {
                        alert("请求出错，可能连接不上服务器");
                    }

                })
            }


            /* 删除角色 */
            function deleterole(id) {

                if (id < 2) {

                    layer.msg("不能删除受保护的角色！")
                    return false;
                }

                if (confirm("真的要删除角色吗?")) {


                    $.ajax({
                        type: 'POST',
                        url: '${pageContext.request.contextPath}/deleteRoleById.html',
                        data: {
                            "roleId": id
                        },

                        dataType: 'json', //要求服务器返回 json对象 而不是字符串
                        success: function(data) {

                            if (data.code == 1) {
                                $("#tr_" + id).remove();
                                layer.msg('删除成功');
                                return;
                            } else {
                                layer.msg(data.msg);
                            }
                        },
                        error: function() {
                            alert("请求出错，可能连接不上服务器");
                        }

                    });


                }

            }




            /* 设置角色的权限 */

            function setRoleRights(id) {

                $.ajax({
                    type: 'POST',
                    url: '${pageContext.request.contextPath}/setRoleRightsInit.html',
                    data: {
                        "roleid": id
                    },

                    success: function(data) {


                        $("#setRoleRights").html(data);

                        setRoleRightLay = layer.open({
                            type: 1,
                            title: false,
                            closeBtn: true, // 显示关闭按钮
                            shift: 1,
                            offset: ['15px'], //只设置一个 表示 top 设置2个，表示 top left
                            area: ['600px', '560px'],
                            shadeClose: false, //点击窗口意外区域 不响应
                            content: $("#setRoleRights")
                        });


                    },
                    error: function() {
                        alert("请求出错，可能连接不上服务器");
                    }

                })
            }
        </script>





        </html>